<template>
	<view class="container">
		<!-- 详情图片 -->
		<view class="detailImage">
			<image :src="details.img">
		</view>
		<!-- 详情基本信息 -->
		<view class="detailInfo">
			<view class="detailInfoName">
				<label>{{details.goodsname}}</label>
			</view>
			<view class="detailInfoPrice">
				<label style="color: red;">￥ {{details.price}}</label>
				<label style="font-size: 24rpx;color: #ccc;">(此价格不与套装优惠同时享受)</label>
			</view>			
		</view>
		
		<!-- 基本信息改变 -->
		<view class="changeInfo">
			<view class="youhui">
				<view>促销：<label class="manjian">满减</label><label class="dazhe">满2件9折；3件8折</label></view>
			</view>
			<!-- 数量加减 -->
			<view class="changeNum">
				<view class="num">购买数量</view>
				<view class="action">
				  <label class="jian" @click="_minus">-</label>
				  <label class="zhi">{{num}}</label>
				  <label class="jia" @click="_add">+</label>
				</view>
			</view>
			<!-- 商品属性 -->
			<view class="changeState">
				<view class="productStat">
					<label for="">商品属性</label>
				</view>
				<view class="productGuige">
					<label>{{details.specsname}}</label>
					<!-- <view class="threed3i1">30g</view>
					<view class="threed3i2">5g</view> -->
					<view class="threed3i1" v-for="(item,index) of details.specsattr">{{item}}</view>
				</view>
			</view>
		</view>
		<!-- 商品详情 -->
		 <view class="productDetail">
			<view class="productDetailTitle">商品详情</view>
			<!-- 需要处理图片自适应问题 -->
			<!-- <image src="@/static/detail/2.jpg" @load="autoImage" :style="{width:autoWidth+'px',height:autoHeight+'px'}" /> -->
			<rich-text :nodes="details.description"></rich-text>
		</view>
		
		<view class="productEval">
			<view class="eval">商品评价</view>
			<view >
				<label class="evalUsername">小李白</label>
				<label class="evalUsertitle">交易很好，物流很快</label>					
				<view class="evalImage">
					<image src="@/static/detail/pingjia1.jpg">
					<image src="@/static/detail/pingjia2.jpg">
					<image src="@/static/detail/pingjia3.jpg">
				</view>
				<label class="evalTime">2020-02-12</label>
			</view>
		</view>
		<!-- 底部按钮 -->
		<view class="foot">
			<button class="footbtn1" @click="_addProductToCarts">加入购物车</button>
			<button class="footbtn2">立即购买</button>
		</view>
	</view>
</template>

<script>
	// 导入图片自适应工具类
	let actionimage = require('../../utils/ActionImage.js');
	
	import Http from '@/utils/http.js'
	import { apiurl } from '@/utils/config.js'
	
	/*
	
	uid  用户编号，必填项
	goodsid 商品编号，必填项
	num 数量，必填项
	checked 是否选中，必填项 ，默认1 选中  0 不选中
	authorization  header头中需要添加token后台验证条件
	*/ 
   
   let appObj = getApp()
   
	export default {
		data() {
			return {
				autoHeight:'',
				autoWidth:'',
				details:{},//存储商品详情
				id:'2',//
				num:1
			}
		},
		methods: {
			
			_minus(){
				this.num--
				if(this.num <1){
					this.num=1
				}
			},
			_add(){
				this.num++
			},
			//处理图片自适应方法
			autoImage(e){
				// 调用图片自适应工具类方法，进行处理图片
				let auto  = actionimage.default(e)
				this.autoHeight = auto.autoHeight;
				this.autoWidth = auto.autoWidth;
			},
			async _getDetails(){
				let result = await Http({
					url:'/api/getgoodsinfo',
					data:{
						id:this.id
					}
				})
				//console.log( result,'2222' )
				this.details = result.data.list[0]
				this.details.specsattr = this.details.specsattr.split(',')
				this.details.img = apiurl + this.details.img
			},
			async _addProductToCarts(){
				//console.log('add')
				//console.log( appObj,'app实例' )
				let uid = appObj.userInfo.uid 
				let authorization = appObj.userInfo.token 
				let checked = 1//用户添加到购物车 ，假定用户想买
				let num = this.num//默认添加一个商品的数量
				let goodsid = this.id
				let result = await Http({
					url:'/api/cartadd',
					data:{
						uid,checked,num,goodsid
					},
					header:{
						authorization
					}
				})
				//console.log( result,'添加结果' )
				if( result.data.msg == '添加成功' ){
					uni.showToast({
						title:'添加成功',
						duration:2000
					})
					setTimeout(()=>{
						uni.switchTab({
							url:'../cart/cart'
						})
					},2000)
				}
			},
			
		},
		mounted(){
			this.id = this.$mp.query.id
			this._getDetails()
		},
		
	}
</script>

<style>
	@import url("../../common/css/details.css");
</style>